$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;
  
  .banner {
    width: 100%;
    position: relative;

    .bg {
      img {
        width: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .t {
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%, -50%);
      color: #FFF;
      font-size: $fontSize_54;
      font-weight: 700;
    }

    .add {
      position: absolute;
      left: 50%;
      bottom: 30%;
      transform: translateX(-50%);
      z-index: 10;
      transition: all 600ms;
      img{
        width: 60/$f+vw;
      }
      &:hover {
        transform:translateX(-50%) rotate(180deg);
      }
    }
  }

  .types {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    align-items: center;

    span {
      width: 1px;
      height: 1.5vw;
      background: #E6E6E6;
    }

    a {
      width: 15vw;
      color: #666;
      font-size: $fontSize_16;
      text-align: center;
      position: relative;
      padding: 1.5vw 0;
      transition: all 600ms;

      &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background: #79C536;
        transition: all 600ms;
      }

      &:hover {
        color: #79C536;
      }
    }

    .active {
      color: #79C536;

      &::after {
        width: 100%;
      }
    }
  }

  .section1{
    padding: 5vw 0;
    .wrap{
        width: 85vw;
        margin: auto;
        .title{
            text-align: center;
            h1{
                font-size: 42/$f+vw;
                color: #000;
                font-weight: 500;
                margin: 0 0 15/$f+vw;
            }
            p{
                width: 846/$f+vw;
                margin: auto;
                max-width: 100%;
                font-size: 16/$f+vw;
                line-height: 26/$f+vw;
                color: #666;
            }
        }
        .cut{
            margin: 50/$f+vw 0 30/$f+vw 0;
            display: flex;
            justify-content: center;
            .list{
                width: 150/$f+vw;
                height: 40/$f+vw;
                background: #E4E4E4;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16/$f+vw;
                color: #000;
                position: relative;
                z-index: 1;
                transition: all .6s;
                cursor: pointer;
                &::after{
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: -1;
                    background: linear-gradient(90deg, #92D341 0%, #4FAD24 100%);
                    transition: all .6s;
                    opacity: 0;
                    pointer-events: none;
                }
                &:not(:last-child) {
                    margin: 0 30px 0 0;
                }
                &.on{
                    background: transparent;
                    color: #fff;
                    &::after{
                        opacity: 1;
                    }
                }
                
            }
        }
        @keyframes animate_y {
            0%{
              transform: translateY(20px);
              opacity: 0;
            }
            100%{
              opacity: 1;
              transform: translateY(0);
            }
          }
        .content{
            position: relative;

            .matter{
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                pointer-events: none;
                opacity: 0;
                transform: translateY(20px);
                &:not(:first-child) {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                }
                &.on{
                    opacity: 1;
                    transform: translateY(0);
                    pointer-events: auto;
                    transition: all .6s;
                  .button{
                    img{
                      pointer-events: auto;
                    }
                  }
                }
                .item{
                    width: 392/$f+vw;
                    .img{
                        width: 100%;
                        height: 511/$f+vw;
                        overflow: hidden;
                        margin: 0 0 25/$f+vw;
                      position: relative;
                      .text_mask{
                        position: absolute;
                        background: rgba(86, 177, 39,.7);
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 2;
                        padding: 0 80px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #fff;
                        font-size: 16/$f+vw;
                        box-sizing: border-box;
                        opacity: 0;
                        transition: 1s;
                      }
                        img{
                            width: 100%;
                            height: 100%;
                            transition: all .6s;
                            &:hover{
                                transform: scale(1.03);
                            }
                        }
                    }
                    p{
                        font-size: 20/$f+vw;
                        color: #000;
                        text-align: center;
                        font-weight: 400;
                    }
                  &:hover{
                    .text_mask{
                      opacity: 1;
                    }
                  }
                }
                .button{
                    position: absolute;
                    width: 104%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    display: flex;
                    justify-content: space-between;
                    pointer-events: none;
                    z-index: 9;
                    img{

                        cursor: pointer;
                        width: 72/$f+vw;
                        height: 72/$f+vw;
                        object-fit: contain;
                    }
                }
              &.matter:not(.matter2){
                .button{
                 display: none;
                }
              }
                &.matter2{
                    .item{
                        width: 100%;
                        .img{
                            height: 523/$f+vw;
                            img{
                                object-fit: contain;
                            }
                        }
                    }
                }
            }
        }
    }
  }

  .section2{
    img{
      object-fit: cover;
    }
    padding: 6.7vw 0 11vw 0;
    position: relative;
    z-index: 1;
    .bg{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .wrap{
        width: 90vw;
        margin: auto;
        .title{
            text-align: center;
            margin: 0 0 5vw;
            h1{
                font-size: 42/$f+vw;
                color: #111F2C;
                font-weight: 400;
                margin: 0 0 44/$f+vw;
            }
            p{
                width: 1226/$f+vw;
                max-width: 100%;
                margin: auto;
                font-size: 18/$f+vw;
                line-height: 30/$f+vw;
            }
        }
      .content{
        position: relative;
        .button{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          z-index: 2;
          pointer-events: none;
          width: 110%;
          justify-content: space-between;
          display: none;
          img{
            width: 72px;
            cursor: pointer;
            pointer-events: auto;
            filter: brightness(.95);
          }
        }
      }
    }
    .research2{
      width: 100%;
      .item{
        width: 100%;
        .img{
          width: 100%;
          height: 170/$f+vw;
          overflow: hidden;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
            transition: all .6s;
            &:hover{
              transform: scale(1.05);
            }
          }

        }
        .text{
          width: 100%;
          height: 55/$f+vw;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16/$f+vw;
          color: #79C536;
          font-weight: 500;
          background: #fff;
        }
      }
    }
  }

  .section3{
    img{
      object-fit: cover;
    }
    padding: 4.5vw 0 6vw 0;
    position: relative;
    z-index: 1;
    .bg{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .wrap{
      display: flex;
      max-width: 90%;
      margin: auto;
      justify-content: center;
      position: relative;
      left: -100/$f+vw;
      .img{
        width: 733/$f+vw;
        margin: 0 109/$f+vw 0 0;
        img{
          width: 100%;
          transition: all .6s;
          cursor: pointer;
          &:hover{
            transform: scale(1.02);
          }
        }
      }
      .r{
        width: 572/$f+vw;
        height: fit-content;
        margin: 60/$f+vw 0 0 0;
        h1{
          font-size: 42/$f+vw;
          color: #111F2C;
          margin: 0 0 24/$f+vw;
        }
        p{
          font-size: 18/$f+vw;
          line-height: 32/$f+vw;
          color: #333;
          font-weight: 350;
        }
      }
    }

  }

  .common_contact{
    position: relative;
    z-index: 1;
    height: 229/$f+vw;
    display: flex;
    align-items: center;
    justify-content: center;
    .bg{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .wrap{
      display: flex;
      align-items: center;
      justify-content: center;
      h1{
        font-size: 32/$f+vw;
        color: #fff;
        font-weight: 600;
        margin: 0 59/$f+vw 0 0;
      }
      .r{
        width: 578/$f+vw;
        height: 52/$f+vw;
        background-color: #fff;
        border-radius: 4/$f+vw;
        display: flex;
        padding: 0 2/$f+vw 0 18/$f+vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .zuo{
          display: flex;
          align-items: center;
        }
        .choice{
          display: flex;
          align-items: center;
          &>p{
            font-size: 14/$f+vw;
            color: #111F2C;
            font-weight: 600;
            margin: 0 12/$f+vw 0 0;
          }
          &>img{
            width: 12/$f+vw;
            height: 12/$f+vw;
          }
        }
        .line{
          height: 16/$f+vw;
          width: 1px;
          background-color: rgba(17, 31, 44, 0.12);
          margin: 0 18/$f+vw 0 15/$f+vw;
        }
        input{
          width: 329/$f+vw;
          border: none;
          background-color: transparent;
          font-size: 16/$f+vw;
          font-weight: 600;
          &::placeholder{
            color: #999;
          }
        }
        button{
          width: 136/$f+vw;
          height: 48/$f+vw;
          border-radius: 4/$f+vw;
          background: #344A83;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16/$f+vw;
          font-weight: 600;
          color: #fff;
          outline: none;
          border: none;
          cursor: pointer;
        }
      }
    }
  }


  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .banner{
      .bg{
        img{
          height: 300px;
        }
      }
      .t{
        font-size: 20px;
      }
      .add{
        bottom:25%;
        img{
          width:20px;
        }
      }
    }
    .types{
      a{
        width: 30%;
        font-size: 14px;
        padding: 10px 0;
        &::after{
          height: 2px;
        }
      }
      span{
        height: 10px;
      }
    }
    .section1{
      padding: 30px 0;
      .wrap{
        width: 90%;
        .title{
          h1{
            font-size: 24px;
            line-height: 1;
            margin: 0 0 15px;
          }
          p{
            font-size: 14px;
            line-height: 2;
            width: 100%;
          }
        }
        .cut{
          margin: 20px 0;
          .list{
            width: 150px;
            height: 40px;
            font-size: 14px;
            &:not(:last-child) {
              margin: 0 20px 0 0;
            }
          }
        }
        .content{
          .matter{
            &.matter:not(.matter2){
              .button{
                display: flex;
              }
            }
            .button{
              img{
                width: 50px;
                height: 50px;
              }
            }
            .item{
              width: 100%;
              .img{
                // height: 400px;
                height: auto;
                // margin: 0 0 15px;
                width: 70%;
                position: relative;
                margin: 30px auto 0;
                img{
                  object-fit: cover;
                  width: 100%;
                  margin:  auto;
                  height: 300px;
                  display: block;
                }
                .text_mask{
                  font-size: 14px;
                  padding: 0 5%;
                  line-height: 1.5;
                }
              }
              p{
                font-size: 16px;
                margin-top: 10px;
              }
            }
            &.matter2 {
              .item{
                .img{
                  height: auto;
                }
              }
            }
          }
        }
      }
    }

    .section2{
      padding: 30px 0;
      .wrap{
        width: 90%;
        .title{
          margin: 0 0 15px;
          h1{
            font-size: 24px;
            line-height: 1;
            margin: 0 0 15px;
          }
          p{
            font-size: 14px;
            line-height: 2;
            width: 100%;
          }
        }
        .content{
          .button{
            width: 105%;
            display: flex!important;
            img{
              width: 40px;
            }
          }
          .research2 {
            width: 70%;
            .item{
              .img{
                height: auto;
              }
              .text{
                height: 40px;
                font-size: 14px;
              }
            }
          }
        }



 
      }
    }

    .section3{
      padding: 45px 0;
      .wrap{
        width: 90%;
        flex-direction: column-reverse;
        left: 0;
        .img{
          width: 100%;
          margin: 30px 0 0;
          position: relative;
          left: -30px;
        }
        .r{
          text-align: center;
          width: 100%;
          h1{
            font-size: 24px;
            line-height: 1;
            margin: 0 0 20px; 
          }
          p{
            font-size: 13px;
            line-height: 2;
          }
        }
      }
    }

    .common_contact{
      height: 180px;
      .wrap{
        flex-direction: column;
        align-items: unset;

        width: 90%;
        h1{
          font-size: 24px;
          margin: 0 0 20px;
        }
        .r{
          width: 100%;
          height: 52px;
          padding: 0 5px 0 15px;
          box-sizing: border-box;
          .choice{
            p{
              font-size: 14px;
              margin: 0 5px 0 0;
            }
            img{
              width: 12px;
              height: 12px;
            }
          }
          .line{
            width: 1px;
            height: 16px;
            margin: 0 7px;
          }
          input{
            width: 73%;
            font-size: 14px;
          }
          button{
            width: 136px;
            height: calc(100% - 10px);
            font-size: 15px;
          }
        }
      }
    }
  }
}